<!--
 * @Author: 小花
 * @Date: 2022-05-21 17:36:21
 * @LastEditors: 小花
 * @LastEditTime: 2022-05-28 19:41:48
 * @FilePath: /permission_client/src/views/HomeView.vue
 * @Description: 首页
-->
<template>
  <svg width="100%" height="100%" id="svg" viewBox="0 0 1440 700" xmlns="http://www.w3.org/2000/svg"
    class="transition duration-300 ease-in-out delay-150">
    <defs>
      <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
        <stop offset="5%" stop-color="#002bdc66"></stop>
        <stop offset="95%" stop-color="#32ded466"></stop>
      </linearGradient>
    </defs>
    <path
      d="M 0,700 C 0,700 0,175 0,175 C 81.98205128205129,170.6076923076923 163.96410256410257,166.2153846153846 253,178 C 342.0358974358974,189.7846153846154 438.125641025641,217.74615384615387 510,230 C 581.874358974359,242.25384615384613 629.5333333333333,238.79999999999998 708,220 C 786.4666666666667,201.20000000000002 895.7410256410255,167.05384615384617 976,147 C 1056.2589743589745,126.94615384615385 1107.502564102564,120.98461538461538 1180,128 C 1252.497435897436,135.01538461538462 1346.248717948718,155.0076923076923 1440,175 C 1440,175 1440,700 1440,700 Z"
      stroke="none" stroke-width="0" fill="url(#gradient)"
      class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 350)"></path>
    <defs>
      <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
        <stop offset="5%" stop-color="#002bdc88"></stop>
        <stop offset="95%" stop-color="#32ded488"></stop>
      </linearGradient>
    </defs>
    <path
      d="M 0,700 C 0,700 0,350 0,350 C 86.55897435897435,364.3820512820513 173.1179487179487,378.76410256410253 257,375 C 340.8820512820513,371.23589743589747 422.0871794871796,349.325641025641 489,335 C 555.9128205128204,320.674358974359 608.5333333333332,313.93333333333334 694,302 C 779.4666666666668,290.06666666666666 897.7794871794874,272.94102564102565 993,290 C 1088.2205128205126,307.05897435897435 1160.3487179487179,358.30256410256413 1231,374 C 1301.6512820512821,389.69743589743587 1370.825641025641,369.84871794871793 1440,350 C 1440,350 1440,700 1440,700 Z"
      stroke="none" stroke-width="0" fill="url(#gradient)"
      class="transition-all duration-300 ease-in-out delay-150 path-1" transform="rotate(-180 720 350)"></path>
    <defs>
      <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
        <stop offset="5%" stop-color="#002bdcff"></stop>
        <stop offset="95%" stop-color="#32ded4ff"></stop>
      </linearGradient>
    </defs>
    <path
      d="M 0,700 C 0,700 0,525 0,525 C 90.93846153846152,494.6666666666667 181.87692307692305,464.33333333333337 259,471 C 336.12307692307695,477.66666666666663 399.4307692307692,521.3333333333333 481,537 C 562.5692307692308,552.6666666666667 662.4000000000001,540.3333333333334 749,520 C 835.5999999999999,499.66666666666663 908.9692307692308,471.33333333333326 983,476 C 1057.0307692307692,480.66666666666674 1131.7230769230769,518.3333333333334 1208,532 C 1284.2769230769231,545.6666666666666 1362.1384615384616,535.3333333333333 1440,525 C 1440,525 1440,700 1440,700 Z"
      stroke="none" stroke-width="0" fill="url(#gradient)"
      class="transition-all duration-300 ease-in-out delay-150 path-2" transform="rotate(-180 720 350)"></path>
  </svg>

  <!-- =========== -->

  <!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <img src="@/assets/logo/logo.svg" class="logo animate__animated animate__fadeInTopLeft" type="image/svg+xml" />

  <span class="title animate__animated animate__fadeInTopRight">权限管理系统</span>

</template>

<script lang='ts'>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HomeView'
})
</script>

<style lang='scss' scoped>
.logo {
  width: 25vw;
  height: 23vw;
  position: absolute;
  left: 1%;
  top: 1%;
}

.title {
  position: absolute;
  left: 0;
  top: 20%;
  right: 0;
  margin: auto;
  text-align: center;
  font-size: 5vw;
  color: white;
  letter-spacing: 2vw;
  text-indent: 2vw;
}

.st0 {
  fill: url(#SVGID_1_);
}

.st1 {
  fill: #C9CED3;
}

.st2 {
  fill: #FFFFFF;
}

.st3 {
  fill: #2B3847;
}

.st4 {
  fill: #DC7A52;
}

.st5 {
  fill: #C55F38;
}

.st6 {
  fill: #EAB639;
}

.st7 {
  fill: #FFFEE9;
}
</style>
